<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0" />
    <title>配置弹出推荐图片模板</title>
    <#include "/view/admin/head.html"/>
    <script type="text/javascript" src="${base}/jstool/bootstrap-switch/bootstrap-switch.min.js"></script>
    <script type="text/javascript" src="${base}/jstool/bootstrap-fileinput/js/fileinput.js"></script>
    <script type="text/javascript" src="${base}/jstool/bootstrap-fileinput/js/locals/zh.js"></script>
    <link rel="stylesheet" type="text/css" href="${base}/jstool/bootstrap-switch/bootstrap-switch.min.css" />
    <link rel="stylesheet" type="text/css" href="${base}/jstool/bootstrap-fileinput/css/fileinput.min.css" />

    <style type="text/css">
        .list-path{
            height: 50px;
            line-height: 50px;
            background-color: #9acfea;

        }
        .table-class{
            width:90%;
            text-align: center;
            border:1px solid #afd9ee;
            margin:0 auto;
            margin-top: 50px;
        }
        table{table-layout:fixed;word-break:break-all;}
        table th{
            width:20%;
            background-color: #d9edf7;
            text-align: right;
        }
        table td{
            width:30%;
            text-align: left;
        }
        .go-back{
            float:right;
            margin-right: 30px;

        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('.label-write').css('display','none');
            $('.btn-save').css('display','none');
            $('.btn-cansel').css('display','none');
            $('#picPath').fileinput({
                language: 'zh', //设置语言
                allowedFileExtensions: ['jpg', 'png', 'gif'],//接收的文件后缀
                showUpload: false, //是否显示上传按钮
                showCaption: false,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            });
            $('[name="display"]').bootstrapSwitch({
                onText:"显示",
                offText:"隐藏",
                onColor:"success",
                offColor:"info",
                size:"small",
                onSwitchChange:function(event,state){
                    if(state==true){
                        $(this).val("1");
                    }else{
                        $(this).val("0");
                    }
                }
            });
        });
    </script>
</head>
<body>

<div class="list-path" > <span style="margin-left: 50px;"> <a href="${base}/recommendpic/list.do"><span class="glyphicon glyphicon-home"></span> 弹出推荐图片列表</a> /  配置弹出推荐图片模板</span>
    <div style="float: right; margin-right: 40px;">
        <a class="btn btn-info"
           href="${base}/recommendpic/list.do">返回</a>
    </div>
</div>


<div class="table-class">
    <#if msg??>
        <div class="alert alert-error" style="background-color: #f2dede;color: #a94442;">
            <a class="close" data-dismiss="alert">×</a>
            <strong>错误!</strong>${msg!}
        </div>
    </#if>
    <form id="form1" action="${base}/recommendpic/saveTemplate.do" method="post" enctype="multipart/form-data" >
    <table class="table table-bordered">
        <tr>
            <th colspan="4"></th>

        </tr>
        <tr>
            <th>标题</th>
            <td>
                <span class="label-view">${entity.title!}</span>
                <span class="label-write">
                    <input type="text" class="form-control" id="title" name="title" placeholder="请输入标题" value="${entity.title!}">
                </span>
            </td>
            <th>图片</th>
            <td><span class="label-view"><img src="${base}${entity.picPath!}" height="100px"></span>
                <span class="label-write"><input id="picPath" type="file" name="file" value="${entity.picPath!}"/> </span>
            </td>
        </tr>
        <tr>
            <th>显示关闭时间(单位：秒)</th>
            <td>
                <span class="label-view">${entity.validTime!}</span>
                <span class="label-write">
                    <input type="text" class="form-control" id="validTime" name="validTime" placeholder="请输入显示关闭时间" value="${entity.validTime!}">
                </span>
            </td>
            <th>间隔显示时间(单位：分钟)</th>
            <td>
                <span class="label-view">${entity.interval!}</span>
                <span class="label-write">
                    <input type="text" class="form-control" id="interval" name="interval" placeholder="请输入间隔显示时间" value="${entity.interval!}">
                </span>
            </td>
        </tr>
        <tr>
            <th>外链接</th>
            <td><span class="label-view">${entity.url!}</span>
                <span class="label-write"><input type="text" class="form-control" name="url" placeholder="请输入外链接" value="${entity.url!}"/> </span>
            </td>
            <th>默认全局显示或隐藏</th>
            <td>
                <span class="label-view">
                   <#if entity.display??>
                       <#if '0'==entity.display>
                           <span class="label label-default">隐藏</span>
                       <#elseif '1'==entity.display>
                           <span class="label label-success">显示</span>
                       <#else>
                            <span class="label label-default">隐藏</span>
                       </#if>

                       <#else>
                            <span class="label label-default">隐藏</span>
                    </#if>
               </span>
                <span class="label-write">
               <input name="display" type="checkbox"  data-size="small"
                <#if entity.display??>
                    <#if '1'==entity.display>checked="checked" value="1"</#if>
                    <#if '0'==entity.display>value="0"</#if>
                    <#else>
                        value="0"
                </#if>
                />


                </span>

            </td>

        </tr>
        <tr>
            <td colspan="4" width="100%" style="text-align: center;">
                <input type="button" class="btn btn-success isuse-btn btn-update" onclick="update();" value="修改"/>
                <input type="button" class="btn btn-success isuse-btn btn-save" onclick="save();" value="保存"/>
                <input type="button" class="btn btn-danger isuse-btn btn-cansel" onclick="cansel();" value="取消"/>
            </td>

        </tr>
    </table>
    </form>
</div>

<script type="text/javascript">
    function checkForm() {

        var title = $('input[name="title"]').val();
        if(title.length>255){
            $('.table-class').prepend('<div class="alert alert-warning">'+
                '<a href="#" class="close" data-dismiss="alert">&times;</a>标题不能超过255个字符 </div>'
            );
            return false;
        }
        var validTime = $('input[name="validTime"]').val();
        var reg1 = /^\d{1,11}$/;
        if(!reg1.test(validTime)){
            $('.table-class').prepend('<div class="alert alert-warning">'+
                '<a href="#" class="close" data-dismiss="alert">&times;</a>显示关闭时间不能超过11个字符且只能是数字 </div>'
            );
            return false;
        }
        var interval = $('input[name="interval"]').val();
        var reg1 = /^\d{1,11}$/;
        if(!reg1.test(interval)){
            $('.table-class').prepend('<div class="alert alert-warning">'+
                '<a href="#" class="close" data-dismiss="alert">&times;</a>弹出间隔时间不能超过11个字符且只能是数字 </div>'
            );
            return false;
        }

        return true;
    }
    function update(){
        $('.label-view').css('display','none');
        $('.label-write').css('display','');
        $('.btn-update').css('display','none');
        $('.btn-cansel').css('display','');
        $('.btn-save').css('display','');
    }
    function cansel(){
        $('.label-view').css('display','');
        $('.label-write').css('display','none');
        $('.btn-cansel').css('display','none');
        $('.btn-update').css('display','');
        $('.btn-save').css('display','none')
    }
    function save(){
        if(checkForm()){
            $('#form1').submit();
//            $('.close').click();
        }

    }
</script>

</body>
</html>